Afin d'écrire votre code, il est conseillé d'utiliser un éditeur de texte comme Notepad++. Il n'est pas demandé de connaître toutes les balises HTML, ni de connaître tous les attributs CSS. Il vous faudra utiliser :

• un dictionnaire de balises HTML
• un dictionnaire de propriétés CSS

Ouvrir dans une nouvelle fenêtre la page TD_html_1.html et afficher son code source. Pour afficher le code source, faire un clic-droit sur la page, et cliquer sur code source de la page (on peut aussi appuyer sur ctrl + U). Afficher le code de la page TD_html_1.html et, pour chaque balise, expliquer quelle est sa fonction. Enregistrer la page web TD_html_1.html dans votre dossier personnel de travail ISN (Fichier $\rightarrow$ Enregistrer Sous), et ouvrez le fichier .html avec notepad++ (Faire clic-droit sur le fichier enregistrer et cliquer sur Edit with Notepad++). Modifier le fichier pour ajouter : Un commentaire Un paragraphe avec du texte dedans (peu importe quoi) Une liste numérotée Une ligne à la table Un lien Une image Pour voir le résultat, il faut enregistrer les modification et ouvrir le fichier .html avec le navigateur. Le but est de créer une page avec une foule de bonhommes ressemblant à l'image ci-dessous : Créer une page web (que vous enregistrerez dans votre dossier de travail ISN) contenant 50 bonhommes (5 lignes de 10). Pour celà, utilisez une table et cette petite image : Cachez un bonhomme parmi les autres de sorte à ce que si on le trouve et clique dessus, cela mène l'internaute sur le site http://www.perdu.com/. Dans notepad++, appuyer sur Ctrl + D permet de dupliquer une ligne (Si plusieurs lignes sont sélectionnées, alors elles sont toutes dupliquées). Attention, à bien sélectionner le type page web complète avant de cliquer sur Enregistrer, sinon il vous manquera le fichier de style appelé "style.css" (sinon il est possible de le trouver dans le code source de la page sur le lien "style.css"). Le but de l'exercice suivant est d'ajouter des modifications à la feuille de style CSS (que l'on ouvrira dans notepad++) afin de réaliser une belle mise en forme. Enregistrez cette page web dans votre dossier de travail ISN : cliquer sur le lien puis Fichier $\rightarrow$ Enregistrer Sous. Lisez le code source de la page (avec Ctrl+U ou dans Notepad++) et expliquez en quelques lignes pour quoi sont utilisées les balises <header>, <article>, <section>, <aside>, <nav> et <footer>. Ouvrir la feuille de style CSS et décommenter la partie suivante : *{ border-style:solid; border-width:1px; } Cela permet de mettre des bordures à tous les éléments afin de mieux les visualiser. Les attributs déjà présents dans la CSS servent à disposer correctement les différents éléments HTML (notamment pour que la section se trouve à gauche du aside et que le footer soit bien en bas). En ajoutant des attributs avec les bonnes valeurs, essayer d'obtenir un rendu aussi proche que celui-ci : le caractère "*", représente n'importe quelle balise, cela signifie que toutes les balises de la page sont concernées par les modifications sur le style du bord ("border-style") et l'épaisseur du bord ("border-width"). Il va falloir utiliser certains attributs tels que : color : white; background-color : #AAAAAA; Les attributs de couleur peuvent prendre des valeurs connues comme white, red, black,..., mais on peut être plus précis en donnant une couleur RVB en hexadécimal (voir le site code-couleur.com).
Il va également falloir utiliser les attributs : margin : 10px; padding : 5px; Ils correspondent à des marges intérieures et extérieures aux éléments, comme représenté ci-dessous :